<template>
<!-- BOM采购订单 -->
  <section class="content-box">
      <!--BOM列表-->
      <div v-if="isshowList">
        <el-col :span="24" class="SuppC-toolbar">
          <el-form class="title">
            <div class="cover">
              <h2>采购订单</h2>
              <el-button @click="handleBOM()" size="small" class="el-icon-plus">&nbsp;新建</el-button>
              <el-button @click="Search()" size="small" class="el-icon-search">&nbsp;查询</el-button>
            </div>
            <el-form-item class="cover">
              <div class="list-img" @click="handleIn()">
                <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-in.png" alt=""/>
                <span>入仓</span>
              </div>
              <div class="list-img" @click="handleInvoice()">
                <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-invoice.png" alt=""/>
                <span>发票</span>
              </div>
              <div class="list-img" @click="handlePay()">
                <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-pay.png" alt=""/>
                <span>付款</span>
              </div>
              <el-popover
                ref="poverMerge"
                placement="bottom"
                width="100"
                trigger="hover"
                :visible-arrow="false">
                <div class="item-img" @click="handlePrint()" style="display:block;float:none">
                  <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-print.png" alt=""/>
                  <span>打印</span>
                </div>
                <div class="item-img" @click="handleExport()" style="display:block;float:none">
                  <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-export.png" alt=""/>
                  <span>导出</span>
                </div>
                <div class="item-img" @click="handleMerge()" style="display:block;float:none">
                  <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-merge.png" alt=""/>
                  <span>合并</span>
                </div>
              </el-popover>
              <div class="list-img" v-popover:poverMerge>
                <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-more.png" alt=""/>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
        <!--列表-->
        <el-table v-if="dataList" 
        :data="dataList" 
        ref="multipleTable"
        @row-dblclick="handleBOM" 
        tooltip-effect="dark"
        @selection-change="handleSelectionList"
        highlight-current-row  
        v-loading="loading"
        element-loading-text="正在加载中"
        style="width: 100%">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column
            prop="A"
            label="单据日期"
            sortable
            width="120">
          </el-table-column>
          <el-table-column
            prop="B"
            label="单据编号"
            sortable
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="C"
            label="单据名称"
            sortable
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="D"
            label="入仓进度"
            sortable
            width="120">
          </el-table-column>
          <el-table-column
            prop="E"
            label="采购金额"
            width="120">
          </el-table-column>
          <el-table-column
            prop="F"
            label="未付金额"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="G"
            label="结算方式"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="H"
            label="供应商"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="I"
            label="状态"
            width="120">
          </el-table-column>
          <el-table-column
            label="操作"
            width="200">
            <template slot-scope="scope">
              <div class="list-img" @click="repeal(scope.$index, scope.row)">
                <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-repeal.png" alt=""/>
              </div>
              <div class="list-img" @click="checkflowRow(scope.$index, scope.row)">
                <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-flow.png" alt=""/>
              </div>
              <div class="list-img" @click="handleDel(scope.$index, scope.row)">
                <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-list-dele.png" alt=""/>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--查询-->
        <el-dialog title="查询" :visible.sync="dialogSearchVisible" :modal-append-to-body="false" size="tiny">
          <el-form :model="Searchform" class="Searform">
            <el-form-item label="单据日期" :label-width="formLabelWidth">
              <el-date-picker type="date" v-model="Searchform.StartDate" style="width:120px;" placeholder="选择日期"></el-date-picker>
              至&nbsp;<el-date-picker type="date" v-model="Searchform.EndDate" style="width:120px;" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="采购金额" :label-width="formLabelWidth">
              <el-input v-model.number.trim="Searchform.StartMoney" auto-complete="off" style="width:120px;"></el-input>
              至&nbsp;<el-input v-model.number.trim="Searchform.EndMoney" auto-complete="off" style="width:120px;"></el-input>
            </el-form-item>
            <el-form-item label="未付金额" :label-width="formLabelWidth">
              <el-input v-model.number.trim="Searchform.StartMoney" auto-complete="off" style="width:120px;"></el-input>
              至&nbsp;<el-input v-model.number.trim="Searchform.EndMoney" auto-complete="off" style="width:120px;"></el-input>
            </el-form-item>
            <el-form-item label="结算方式" :label-width="formLabelWidth">
              <el-select v-model="Searchform.DocStatus" style="width:262px;" placeholder="请选择">
                <el-option value="" label="全部">全部</el-option>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单据编号" :label-width="formLabelWidth">
              <el-input v-model="Searchform.DocNo" style="width:262px;"></el-input>
            </el-form-item>
            <el-form-item label="单据名称" :label-width="formLabelWidth">
              <el-select v-model="Searchform.DocStatus" style="width:262px;" placeholder="请选择">
                <el-option value="" label="全部">全部</el-option>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-select v-model="Searchform.DocStatus" style="width:262px;" placeholder="请选择">
                <el-option value="" label="全部">全部</el-option>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="供应商" :label-width="formLabelWidth">
              <el-input v-model="Searchform.Title" style="width:262px;"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer cover">
            <el-button size="small" @click="Reset">重 置</el-button>
            <el-button size="small" @click="Query">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!--BOM-->
      <div v-if="isshowBOM">
        <!-- 导航条 -->
		    <div class="flex-top">
          <div>
            <i class="el-icon-arrow-left back" @click="ToBack"></i>
            <span  style="font-size:20px;vertical-align:middle;margin:0 10px;">
              采购订单{{RadioComputed}}
            </span>
          </div>
          <!-- 右侧 -->
          <div class="flex">
            <span class="wrapper cover">
              <div style="margin:10px;overflow:hidden;">
                <div class="list-img" @click="Save()">
                  <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
                    <img class="common-button-group" src="../../../../static/content/images/Common/common-save.png" alt="保存"/>
                  </el-tooltip>
                </div>
                <div class="list-img" @click="Submit()">
                  <el-tooltip class="item" effect="dark" content="提交" placement="bottom">
                    <img class="common-button-group" src="../../../../static/content/images/Common/common-submit.png" alt="提交"/>
                  </el-tooltip>
                </div>
                <div class="list-img" @click="checkflowRow()">
                  <el-tooltip class="item" effect="dark" content="查看流程" placement="bottom">
                    <img class="common-button-group" src="../../../../static/content/images/Common/common-flow.png" alt="查看流程"/>
                  </el-tooltip>
                </div>
                <div class="list-img" @click="handlePrint()">
                  <el-tooltip class="item" effect="dark" content="打印" placement="bottom">
                    <img class="common-button-group" src="../../../../static/content/images/Common/common-print.png" alt="打印"/>
                  </el-tooltip>
                </div>
              </div>
            </span>
          </div>
        </div>
        <div v-if="isShowRadio" v-show="radioModel === '' || radioModel === 2" class="SuppC-nav-item">
          <el-radio-group 
          v-model="radioModel" 
          v-popover:popover
          @change="changeRadio(radioModel)">
            <el-popover ref="popover" 
                v-model='tooltipShow'  
                placement="right-start"
                :visible-arrow="false"
                >
                <div class="SuppC-Check-Popover">
                    <span>请选择其他采购具体类型</span>
                    <hr>
                    <ul>
                      <li @click="check(1,'超额采购')">超额采购</li>
                      <li @click="check(2,'非BOM采购')">非BOM采购</li>
                      <li @click="check(3,'食品采购')">食品采购</li>
                    </ul>
                </div>
            </el-popover>
            <span @click="tooltipToggleFn(false)">
                <el-radio :label="1">BOM采购</el-radio>
            </span>
            <span @click="tooltipToggleFn(true)" style="padding-left:15px;">
                <el-radio :label="2">其他采购</el-radio>
            </span>
        </el-radio-group>
        </div>
        <div style="margin-top:10px">
            是否退货&#12288;
            <el-switch
                v-model="swithReturn"
                on-color="#13ce66"
                off-color="#ff4949">
            </el-switch>
        </div> 
        <main class="main" style="width:1120px">
          <div class="main-left">
            <div v-if="DocNo">
              <h3>单号</h3>
              <strong>{{DocNo}}</strong>
            </div>
            <div>
              <h3>日期</h3>
              <div class="flex">
                <el-date-picker type="date" v-model="DocDate" placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>
            <div class="SuppC-Money">
              <h3>采购金额</h3>
              <el-input type="Number" v-model='name1'></el-input>
              <i class="icon iconfont icon-rmb"></i>
            </div>
          </div>
          <div class="main-right" style="width:65%;">
            <div class="left-form">
              <el-form label-width="70px" class="form-content">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="供   应   商">
                      <el-select v-model="name1" placeholder="请选择供应商" style="width:200px;">
                        <el-option
                          v-for="item in Names"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="销售订单">
                      <el-input
                        placeholder="请选择销售订单"
                        style="width:200px;"
                        icon="search"
                        v-model="input2"
                        @focus="SaleOrderQuery"
                        :disabled="OtherType=='非BOM采购'||OtherType=='食品采购'"><!--非BOM采购或食品采购时候就禁用-->
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="结算方式">
                      <el-select @change="settleChange(settle)" v-model="settle" placeholder="请选择结算方式" style="width:200px;">
                        <el-option
                          v-for="item in Settlement"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" v-if="isshowSettle">
                    <el-form-item label="需求日期">
                      <el-date-picker type="date" v-model="DocDate" placeholder="选择日期" style="width:200px;">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="业务描述">
                      <el-input
                        style="width:555px;"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入内容"
                        v-model="name1">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </main>
        <div class="border-solid"></div>
        <div class="budget cover" style="width:1120px;">
          <h3>订单明细</h3>  
          <el-input
            placeholder="请输入关键字查询"
            icon="search"
            v-model="input2"
            style="width:200px;"
            size="small"
            :on-icon-click="handleIconClick">
          </el-input>
          <div class="SuppC-Nas-itemRight">
            <el-tooltip class="item" effect="dark" content="导入" placement="top-start" style="margin-right:20px;">
              <span class="SuppC-common-icon"><img src="../../../../static/content/images/Common/common-import.png" alt=""></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="导出" placement="top-start">
              <span class="SuppC-common-icon" @click="handleExport"><img src="../../../../static/content/images/Common/common-export.png" alt=""></span>
            </el-tooltip>
          </div>
          <table class="InHideTable" border="1" style="width:1080px;margin:0 20px;">
            <tr>
              <th style="width:40px;">操作</th>
              <th style="width:100px;">存货编码</th>
              <th style="width:100px;">存货名称</th>
              <th style="width:80px;">库存</th>
              <th style="width:80px;" v-if="OrderStatus==true">采购上限</th>
              <th style="width:80px;" class="font-green">采购数量</th>
              <th style="width:80px;">参考单价</th>
              <th style="width:80px;">采购单价</th>
              <th style="width:80px;" class="font-green">采购金额</th>
            </tr>
            <tr v-for="(item,index) in OrderDetail" :key="index">
              <td>
                <!--BOM采购只有删除-->
                <span v-if="OrderStatus==false" class="SuppC-common-icon" @click="addOrderRow(index)">
                  <img src="../../../../static/content/images/Common/common-add.png" alt=""/>
                </span>
                <span class="SuppC-common-icon" @click="deleOrderRow(index)">
                  <img src="../../../../static/content/images/Common/common-dele.png" alt=""/>
                </span>
              </td>
              <td @click="OpenInventory(index)">
                <template v-if="OrderStatus==false">
                  <el-input type="text" class="input-Focus"   v-model="item.A"></el-input>
                </template>
                <template v-if="OrderStatus==true">
                  {{item.A}}
                </template>
              </td>
              <td>{{item.B}}</td>
              <td>{{item.C}}</td>
              <td v-if="OrderStatus==true">{{item.D}}</td>
              <td>
                <el-input :ref="index * 2 + 1" @keyup.enter.native="jump(index * 2 + 1)" type="text" placeholder="请录入" class="input-Focus white"  v-model="item.E"></el-input>
              </td>
              <td>{{item.F}}</td>
              <td>{{item.G}}</td>
              <td>
                <el-input :ref="index * 2 + 2" @keyup.enter.native="jump(index * 2 + 2)" type="text" placeholder="请录入" class="input-Focus white"  v-model="item.H"></el-input>
              </td>
            </tr>
            <tr>
              <td :colspan="OrderStatusComputed">合计</td>
              <td>{{OrderNotaxAmount}}</td>
            </tr>
          </table>
        </div>
      </div>
      <!--采购入仓单-->
      <div v-if="isshowIn">
        <!-- 导航条 -->
		    <div class="flex-top">
          <div>
            <i class="el-icon-arrow-left back" @click="ToBack"></i>
            <span style="font-size:20px;vertical-align:middle;margin:0 10px;">
              采购入仓{{InRadioComputed}}
            </span>
          </div>
          <!-- 右侧 -->
          <div class="flex">
            <span class="wrapper cover">
              <div style="margin:10px;overflow:hidden;">
                <div class="list-img" @click="checkflowRow">
                  <img class="common-button-group" src="../../../../static/content/images/Common/common-flow.png" alt=""/>
                  <span class="font">查看流程</span>
                </div>
                <div class="list-img" @click="Save">
                  <img class="common-button-group" src="../../../../static/content/images/Common/common-save.png" alt=""/>
                  <span class="font">保存</span>
                </div>
                <div class="list-img" @click="Submit">
                  <img class="common-button-group" src="../../../../static/content/images/Common/common-submit.png" alt=""/>
                  <span class="font">提交</span>
                </div>
              </div>
            </span>
          </div>
        </div>
        <main class="main" style="width:1120px">
          <div class="main-left">
            <div v-if="DocNo">
              <h3>单号</h3>
              <strong>{{DocNo}}</strong>
            </div>
            <div>
              <h3>日期</h3>
              <div class="flex">
                <el-date-picker type="date" v-model="DocDate" placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="main-right" style="width:65%;">
            <div class="left-form">
              <el-form label-width="70px" class="form-content">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="供应商">
                      <el-select v-model="name1" placeholder="请选择供应商" style="width:200px;">
                        <el-option
                          v-for="item in Names"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" v-if="inStatus==false">
                    <el-form-item label="结算方式">
                      <el-select @change="settleChange(settle)" v-model="settle" placeholder="请选择结算方式" style="width:200px;">
                        <el-option
                          v-for="item in Settlement"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" v-if="inStatus==true">
                    <el-form-item label="采购订单">
                      <el-input 
                      placeholder="请选择采购订单"
                      v-model="name1" 
                      style="width:200px;"
                      icon="search"
                      @focus="PurOrderQuery"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="采购员">
                      <el-input v-model="name1" placeholder="请输入采购员" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="仓库名称">
                      <el-select v-model="name1" placeholder="请选择仓库" style="width:200px;">
                        <el-option
                          v-for="item in Names"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="业务描述">
                      <el-input
                        style="width:555px;"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入内容"
                        v-model="name1">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </main>
        <div class="border-solid"></div>
        <div class="budget cover"  style="width:1120px;">
          <h3>入仓明细</h3>  
          <el-input
            placeholder="请输入查询关键字"
            icon="search"
            v-model="input2"
            style="width:200px;"
            size="small"
            :on-icon-click="handleIconClick">
          </el-input>
          <div class="SuppC-Nas-itemRight">
            <el-tooltip class="item" effect="dark" content="导入" placement="top-start" style="margin-right:20px;">
              <span class="SuppC-common-icon"><img src="../../../../static/content/images/Common/common-import.png" alt=""></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="导出" placement="top-start">
              <span class="SuppC-common-icon" @click="handleExport"><img src="../../../../static/content/images/Common/common-export.png" alt=""></span>
            </el-tooltip>
          </div>
          <table class="InHideTable" border="1">
            <tr>
              <th style="width:80px;">操作</th>
              <th style="width:100px;">存货编码</th>
              <th style="width:100px;">存货名称</th>
              <th style="width:100px;" v-if="inStatus==true">订单数量</th>
              <th style="width:120px;" class="font-green" v-if="inStatus==true">本次入仓</th>
              <th style="width:100px;" class="font-green" v-if="inStatus==false">入仓数量</th>
              <th style="width:100px;" v-if="inStatus==false">采购单价</th>
              <th style="width:120px;" class="font-green" v-if="inStatus==false">采购金额</th>
            </tr>
            <tr v-for="(item,index) in InWarehousingDetail" :key="index">
              <td>
                <span v-if="inStatus==false" class="SuppC-common-icon" @click="addInRow(index)"><!--添加入仓单-->
                  <img src="../../../../static/content/images/Common/common-add.png" alt=""/>
                </span>
                <span class="SuppC-common-icon" @click="deleInRow(index)"><!--删除入仓单当前行-->
                  <img src="../../../../static/content/images/Common/common-dele.png" alt=""/>
                </span>
              </td>
              <td @click="Stock(index,inStatus)">
                <template v-if="inStatus==false">
                  <el-input type="text" class="input-Focus"   v-model="item.A"></el-input>
                </template>
                <template v-if="inStatus==true">
                  {{item.A}}
                </template>
              </td>
              <td>
                {{item.B}}
              </td>
              <td  v-if="inStatus==true">
                {{item.C}}
              </td>
              <td  v-if="inStatus==true">
                <el-input type="text" class="input-Focus" :class="`input${index}-2`" @blur="inputBlur" @focus="inputFocus"  v-model="item.D" @keyup.enter.native="nextinput($event, `${index}-2`)"></el-input>
              </td>
              <td v-if="inStatus==false">
                <el-input type="text" class="input-Focus" :class="`input${index}-2`" @blur="inputBlur" @focus="inputFocus"  v-model="item.E" @keyup.enter.native="nextinput($event, `${index}-2`)"></el-input>
              </td>
              <td v-if="inStatus==false">
                {{item.F}}
              </td>
              <td v-if="inStatus==false">
                <el-input type="text" class="input-Focus" :class="`input${index}-2`" @blur="inputBlur" @focus="inputFocus"  v-model="item.G" @keyup.enter.native="nextinput($event, `${index}-2`)"></el-input>
              </td>
            </tr>
            <tr v-if="inStatus==false">
              <td colspan="5">合计：</td>
              <td>{{PurAmountCompute}}</td><!--采购金额-->
            </tr>
          </table>
        </div>
      </div>
      <!--采购发票-->
      <div v-if="isshowInvoice">
        <!-- 导航条 -->
		    <div class="flex-top">
          <div>
            <i class="el-icon-arrow-left back" @click="ToBack"></i>
            <span style="font-size:20px;vertical-align:middle;margin:0 10px;">
              采购发票
            </span>
          </div>
           <!-- 右侧 -->
          <div class="flex">
            <span class="wrapper cover">
              <div style="margin:10px;overflow:hidden;">
                <div class="list-img" @click="Save()">
                  <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
                    <img class="common-button-group" src="../../../../static/content/images/Common/common-save.png" alt=""/>
                  </el-tooltip>
                </div>
                <div class="list-img" @click="Submit()">
                  <el-tooltip class="item" effect="dark" content="提交" placement="bottom">
                  <img class="common-button-group" src="../../../../static/content/images/Common/common-submit.png" alt=""/>
                </el-tooltip>
                </div>
              </div>
            </span>
          </div>
        </div>
        <main class="main" style="width:1230px;">
          <div class="main-left">
            <div>
              <h3>单号</h3>
              <strong>{{DocNo}}</strong>
            </div>
            <div>
              <h3>日期</h3>
              <div class="flex">
                <el-date-picker type="date" v-model="DocDate" placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>
            <div class="SuppC-Money">
              <h3>发票金额</h3>
              <el-input type="Number" v-model='name1' placeholder="请录入发票金额"></el-input>
              <i class="icon iconfont icon-rmb"></i>
            </div>
          </div>
          <div class="main-right">
            <div class="left-form">
              <el-form label-width="90px" class="form-content">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="供应商">
                      <el-select v-model="name1" placeholder="请选择" style="width:200px;">
                        <el-option
                          v-for="item in Names"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="发票号码">
                      <el-input v-model="name1"  style="width:200px;" placeholder="请录入发票号码"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="对应进货单">
                      <el-input v-model="name1"  
                      style="width:200px;"
                      placeholder="请选择对应的采购进货单" 
                      icon="search" 
                      @focus="handleStockDialog"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="right-form">
              <el-form label-width="100px">
                <el-form-item label="业务描述">
                  <el-input
                    class="Suppc-txtarea"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入内容"
                    v-model="name1">
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </main>
        <div class="border-solid"></div>
        <div class="budget cover">
          <h3>开票明细</h3>  
          <table class="InHideTable"  border="1">
            <tr>
              <th style="width:150px;">单据编号</th>
              <th style="width:150px;">单据名称</th>
              <th style="width:180px;">存货编号</th>
              <th style="width:180px;">存货名称</th>
              <th style="width:100px;">入仓数量</th>
              <th style="width:100px;">未开票数量</th>
              <th style="width:100px;" class="font-green">本次开票数量</th>
              <th style="width:100px;">单价</th>
              <th style="width:100px;">金额</th>
              <th style="width:100px;">税率</th>
              <th style="width:100px;">税金</th>
              <th style="width:100px;" class="font-green">价税总额</th>
            </tr>
            <tr v-for="(item,index) in InvoiceDetail" :key="index">
              <td>{{item.A}}</td>
              <td>{{item.B}}</td>
              <td>{{item.C}}</td>
              <td>{{item.D}}</td>
              <td>{{item.E}}</td>
              <td>{{item.F}}</td>
              <td>
                <el-input type="text" :ref="index * 3 + 1" @keyup.enter.native="jump(index * 3 + 1)" placeholder="请录入"  class="input-Focus white" v-model="item.G" ></el-input>
              </td>
              <td>{{item.H}}</td>
              <td>{{item.I}}</td>
              <td>{{item.J}}</td>
              <td>
                <el-input type="text" :ref="index * 3 + 2" @keyup.enter.native="jump(index * 3 + 2)" placeholder="请录入"  class="input-Focus white" v-model="item.K"></el-input>
              </td>
              <td>
                <el-input type="text" :ref="index * 3 + 3" @keyup.enter.native="jump(index * 3 + 3)" placeholder="请录入"  class="input-Focus white"  v-model="item.L"></el-input>
              </td>
            </tr>
            <tr>
              <td colspan="8">合计</td>
              <td>{{PrintCount}}</td>
              <td><!-- {{TaxRateCount}} --></td>
              <td>{{TaxCount}}</td>
              <td>{{TaxAmountCount}}</td>
            </tr>
          </table>
          <h3>请核销预付款</h3>
          <table class="InHideTable"  border="1" style="width:1230px;margin: 0 0 0 20px;">
            <tr>
              <!-- <th style="width:40px;">
                <el-checkbox v-model="checked"  @change="fpCheck($event)"></el-checkbox>
              </th> -->
              <th style="width:150px;">单据日期</th>
              <th style="width:150px;">单据编号</th>
              <th style="width:150px;">单据名称</th>
              <th style="width:120px;">预付总额</th>
              <th style="width:120px;">已核销</th>
              <th style="width:120px;">剩余未核销</th>
              <th style="width:120px;">本次核销</th>
            </tr>
            <tr v-for="(item,index) in Payment" :key="index">
              <!-- <td><el-checkbox  class="testCheckBox"></el-checkbox></td> -->
              <td>{{item.A}}</td>
              <td>{{item.B}}</td>
              <td>{{item.C}}</td>
              <td>{{item.D}}</td>
              <td>{{item.E}}</td>
              <td>
                {{item.F}}
              </td>
              <td>
                <el-input type="text" :ref="index * 1 + 1" @keyup.enter.native="jump(index * 1 + 1)" placeholder="请录入" class="input-Focus white" v-model="item.G"></el-input>
              </td>
            </tr>
            <tr>
              <td colspan="6">合计</td>
              <td>{{verification}}</td>
            </tr>
          </table>
        </div>
      </div>
      <!-- 付款单 -->
      <div v-if="isshowPay">
        <!-- 导航条 -->
		    <div class="flex-top">
          <div>
            <i class="el-icon-arrow-left back" @click="ToBack"></i>
            <span style="font-size:20px;vertical-align:middle;margin:0 10px;">
              采购付款单
            </span>
          </div>
           <!-- 右侧 -->
          <div class="flex">
            <span class="wrapper cover">
              <div style="margin:10px;overflow:hidden;">
                <div class="list-img" @click="Save()">
                  <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
                    <img class="common-button-group" src="../../../../static/content/images/Common/common-save.png" alt=""/>
                  </el-tooltip>
                </div>
                <div class="list-img" @click="Submit()">
                  <el-tooltip class="item" effect="dark" content="提交" placement="bottom">
                    <img class="common-button-group" src="../../../../static/content/images/Common/common-submit.png" alt=""/>
                  </el-tooltip>
                </div>
              </div>
            </span>
          </div>
        </div>
        <main class="main" style="width:1120px;">
          <div class="main-left">
            <div v-if="DocNo">
              <h3>单号</h3>
              <strong>{{DocNo}}</strong>
            </div>
            <div>
              <h3>日期</h3>
              <div class="flex">
                <el-date-picker type="date" v-model="DocDate" placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>
            <div class="SuppC-Money">
              <h3>付款金额</h3>
              <el-input type="Number" v-model='name1' placeholder="请录入付款金额"></el-input>
              <i class="icon iconfont icon-rmb"></i>
            </div>
          </div>
          <div class="main-right">
            <div class="left-form">
              <el-form label-width="70px" class="form-content">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="供应商">
                      <el-select 
                      v-model="name1"
                      ref="select"
                      filterable 
                      placeholder="请选择" 
                      style="width:200px;">
                        <el-option
                            v-for="item in Names"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="业务描述">
                      <el-input
                        type="textarea"
                        style="width:615px;"
                        :rows="5"
                        placeholder="请输入内容"
                        v-model="name1">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </main>
        <div class="border-solid"></div>
        <div class="budget cover"  style="width:1120px;" >
          <h3>请录入付款明细</h3>
          <div class="SuppC-Nas-itemRight">
            <el-popover
              ref="popover1"
              placement="top-start"
              width="200"
              trigger="click">
              <h3 class="Suppc-help-titleRed">没有找到对应的付款明细？</h3>
              <ul class="Suppc-help-ul">
                <el-popover
                  ref="popover1"
                  v-model="pop1"
                  placement="right"
                  width="200"
                  trigger="click">
                  <h3 class="Suppc-help-titleGay">物品没入仓</h3>
                  <hr style="margin-top:15px;">
                  <ul class="Suppc-help-ul">
                    <li @click="NewsIn()">申请入仓</li>
                    <li @click="NewsAdvance()">申请预付</li>
                  </ul>
                </el-popover>
                <li v-popover:popover1 @click="popClick(1)">物品没入仓</li>
                <el-popover
                  ref="popover2"
                  v-model="pop2"
                  placement="right"
                  width="200"
                  trigger="click">
                  <h3 class="Suppc-help-titleGay">结算方式为发票结算,但未收到发票</h3>
                  <hr style="margin-top:15px;">
                  <ul class="Suppc-help-ul">
                    <li @click="NewsInvoice()">新建发票</li>
                    <li @click="NewsAdvance()">申请预付</li>
                  </ul>
                </el-popover>
                <li v-popover:popover2 @click="popClick(2)">结算方式为发票结算，但未收到发票</li>
                <li @click="SupplierError()">供应商选错</li>
              </ul>
            </el-popover>
            <i class="icon iconfont icon-iconfontquestion" v-popover:popover1></i>
            <span style="font-size:14px;line-height:1.5">帮助</span>
          </div>
          <table class="InHideTable" border="1" style="width:1080px;">
            <tr>
              <th style="width:150px;">单据编号</th>
              <th style="width:150px;">单据名称</th>
              <th style="width:120px;">单据日期</th>
              <th style="width:120px;">应付总额</th>
              <th style="width:120px;">已付总额</th>
              <th style="width:120px;">剩余未付</th>
              <th style="width:120px;" class="font-green">本次付款</th>
            </tr>
            <tr v-for="(item,index) in PayDetail" :key="index">
              <td>
                {{item.A}}
              </td>
              <td>
                {{item.B}}
              </td>
              <td>
                {{item.C}}
              </td>
              <td>
                {{item.D}}
              </td>
              <td>
                {{item.E}}
              </td>
              <td>
                {{item.F}}
              </td>
              <td>
                <el-input type="text" :ref="index * 1 + 1" @keyup.enter.native="jump(index * 1 + 1)" placeholder="请录入"  class="input-Focus white"  v-model="item.G"></el-input>
              </td>
            </tr>
            <tr>
              <td colspan="3">合计</td>
              <td>{{copeWithCount}}</td><!--应付总额-->
              <td>{{paidCount}}</td><!--已付总额-->
              <td>{{surplusCount}}</td><!--剩余未付-->
              <td>{{thisCount}}</td><!--本次付款-->
            </tr>
          </table>
        </div>
      </div>
      <!-- 销售订单弹窗 -->
      <el-dialog title="销售订单：" :visible.sync="SaleOrderDialog" :modal-append-to-body="false">
        <el-input
          placeholder="请输入关键字查询"
          style="width:200px;margin-bottom:10px;"
          icon="search"
          v-model="name1"
          :on-icon-click="handleIconClick">
        </el-input>
        <el-table 
          border
          tooltip-effect="dark"
          :data="SaleOrderList"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width:100%">
          <el-table-column property="A" label="单据日期" width="150"></el-table-column>
          <el-table-column property="B" label="单据编号" width="150"></el-table-column>
          <el-table-column property="C" label="单据名称" width="150"></el-table-column>
          <el-table-column property="D" label="销售明细" show-overflow-tooltip></el-table-column>
          <el-table-column property="E" label="业务描述" width="180" show-overflow-tooltip></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer cover">
          <el-button size="small" @click="SaleOrderDialog = false">取 消</el-button>
          <el-button size="small" @click="Determine">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 进货查询窗口 -->
      <el-dialog title="进货：" :visible.sync="stockDialog" :modal-append-to-body="false">
        <el-input
          placeholder="请输入销售订单号"
          style="width:200px;margin-bottom:10px;"
          icon="search"
          v-model="name1"
          :on-icon-click="handleIconClick">
        </el-input>
        <el-table 
          border
          tooltip-effect="dark"
          :data="stockData"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width:100%">
          <el-table-column label="序号" type="index" width="80"></el-table-column>
          <el-table-column property="A" label="采购订货单"></el-table-column>
          <el-table-column property="B" label="进货单号"></el-table-column>
          <el-table-column property="C" label="进货名称"></el-table-column>
          <el-table-column property="D" label="进货金额(含税)" show-overflow-tooltip></el-table-column>
          <el-table-column property="E" label="已开票金额" show-overflow-tooltip></el-table-column>
          <el-table-column property="F" label="未开票金额" show-overflow-tooltip></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer cover">
          <el-button size="small" @click="stockDialog = false">取 消</el-button>
          <el-button size="small" @click="Determine">确 定</el-button>
        </div>
      </el-dialog>
      <!--采购进货单窗口-->
      <el-dialog 
      title="进货单"
      :visible.sync="StockDialog" 
      :modal-append-to-body="false">
          <el-input
            placeholder="请输入关键字查询"
            style="width:200px;margin-bottom:10px;"
            icon="search"
            v-model="name1"
            :on-icon-click="stockSearch">
          </el-input>
          <el-table
            :data="StockList"
            style="width:100%"
            highlight-current-row
            @selection-change="handleSelectionList">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              prop="A"
              label="进货单号">
            </el-table-column>
            <el-table-column
              prop="B"
              label="采购金额">
            </el-table-column>
            <el-table-column
              prop="C"
              label="未开票金额">
            </el-table-column>
            <el-table-column
              prop="D"
              label="采购订单号">
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer cover">
            <el-button size="small" @click="StockDialog = false">取 消</el-button>
            <el-button size="small" @click="confirm">确定</el-button>
          </div>
      </el-dialog>
      <!-- 存货窗口 -->
      <el-dialog title="存货：" :visible.sync="InventoryDialog" :modal-append-to-body="false">
        <el-input
          placeholder="请输入关键字查询"
          style="width:200px;margin-bottom:10px;"
          icon="search"
          v-model="name1"
          :on-icon-click="handleIconClick">
        </el-input>
        <el-table 
          border
          tooltip-effect="dark"
          :data="InventoryData"
          @selection-change="handleSelectionSale"
          style="width:100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column property="A" label="存货编号" width="150" sortable></el-table-column>
          <el-table-column property="B" label="存货名称" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column property="C" label="规格型号" show-overflow-tooltip></el-table-column>
          <el-table-column property="D" label="计量单位" width="120"></el-table-column>
          <el-table-column property="E" label="库存数量" width="120" sortable></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer cover">
          <el-button size="small" @click="InventoryDialog = false">取 消</el-button>
          <el-button size="small" @click="Determine">确 定</el-button>
        </div>
      </el-dialog>
      <!--流程图-->
      <el-dialog title="流程执行情况" :visible.sync="checkflowRowVisible" :modal-append-to-body="false" align="center">
        <el-table :data="docRowView" min-height="300" header-align="center" v-loading="docViewloading" element-loading-text="拼命刷新中...">
          <el-table-column property="PlanUser" label="操作人"></el-table-column>
          <el-table-column property="StepName" label="步骤名称"></el-table-column>
          <el-table-column property="OpDate" label="时间"></el-table-column>
          <el-table-column property="OpRemark" label="审批流程"></el-table-column>
        </el-table>
      </el-dialog>
      <!--导出询问框-->
      <el-dialog title="请选择导出的内容" :visible.sync="ExportDialog" :modal-append-to-body="false" size="tiny">
        <el-radio-group v-model="radioExport">
          <el-radio :label="1">导出模板</el-radio>
          <el-radio :label="2">导出订单明细</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer cover">
          <el-button size="small" @click="Cancel">取 消</el-button>
          <el-button size="small" @click="Determine">确 定</el-button>
        </div>
      </el-dialog>
      <!--打印窗口-->
			<el-dialog :visible.sync="dialogPrintVisible" :modal-append-to-body="false">
				<div class="printBox cover">
					<el-button size="small" class="center" @click.native="printPdf()">&#12288;打印&#12288;</el-button>
					<div id="form1">
            <table width="100%" border="0" v-loading="printLoading" element-loading-text="正在加载中">
              <caption>
                <h3 id="Doc">采购订单</h3>
              </caption>
              <thead>
                <tr>
                  <td style="padding:5px 0;line-height:30px;">
                    <div style="float:left;width:33.33%;">销售订单：XXXXXX</div>
                    <div style="float:left;width:33.33%;text-align:center;">日期：XXXXXX</div>
                    <div style="float:right;width:33.33%;text-align:right;">单号：XXXXXX</div>
                  </td>
                </tr>
                <tr>
                  <td style="padding:5px 0;line-height:30px;">
                    <div style="float:left;width:33.33%;">供应商：XXXXXX</div>
                    <div style="float:right;width:33.33%;text-align:right;">结算方式：XXXXXX</div>
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <div id="Line" class="table-c">
                      <table width="100%" class="ListTable">
                        <thead>
                          <tr>
                            <td>存货编号</td>
                            <td>存货名称</td>
                            <td>规格型号</td>
                            <td>单位</td>
                            <td>采购数量</td>
                            <td>采购单价</td>
                            <td>采购金额</td>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>YF0015</td>
                            <td style="text-align:left;">直流电机</td>
                            <td></td>
                            <td></td>
                            <td>4</td>
                            <td>34.25</td>
                            <td>34.25</td>
                          </tr>
                          <tr>
                            <td>YF0015</td>
                            <td style="text-align:left;">直流电机</td>
                            <td></td>
                            <td></td>
                            <td>4</td>
                            <td>34.25</td>
                            <td>34.25</td>
                          </tr>
                          <tr>
                            <td>YF0015</td>
                            <td style="text-align:left;">直流电机</td>
                            <td></td>
                            <td></td>
                            <td>4</td>
                            <td>34.25</td>
                            <td>34.25</td>
                          </tr>
                          <tr>
                            <td colspan="6">合计</td>
                            <td>137.00</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td style="padding:5px 0;line-height:30px;">
                    <div style="float:left;width:33.33%;">审核人：XXXXXX</div>
                    <div style="float:left;width:33.33%;text-align:center;">部门主管：XXXXXX</div>
                    <div style="float:right;width:33.33%;text-align:right;">制单人：XXXXXX</div>
                  </td>
                </tr>
              </tbody>
            </table>
					</div>
				</div>
			</el-dialog>
      <!-- 采购订单弹窗 -->
      <el-dialog title="采购订单" :visible.sync="PurOrderDialog" :modal-append-to-body="false">
        <el-input
          placeholder="请输入关键字查询"
          style="width:200px;margin-bottom:10px;"
          icon="search"
          v-model="name1"
          :on-icon-click="handleIconClick">
        </el-input>
        <el-table 
          border
          tooltip-effect="dark"
          :data="PurOrderList"
          highlight-current-row>
          <el-table-column property="A" label="单据日期"  width="200"></el-table-column>
          <el-table-column property="B" label="单据编号"  width="200"></el-table-column>
          <el-table-column property="C" label="单据名称"  width="200"></el-table-column>
          <el-table-column property="D" label="业务描述"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer cover">
          <el-button size="small" @click="PurOrderDialog = false">取 消</el-button>
          <el-button size="small" @click="Determine">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 进货查询窗口 -->
      <!-- <el-dialog title="进货" :visible.sync="StockDialog" :modal-append-to-body="false">
        <el-input
          placeholder="请输入关键字查询"
          style="width:200px;margin-bottom:10px;"
          icon="search"
          v-model="name1"
          :on-icon-click="handleIconClick">
        </el-input>
        <el-table 
          border
          tooltip-effect="dark"
          :data="StockList"
          highlight-current-row
          @selection-change="handleSelectionList"
          @current-change="handleCurrentChange"
          style="width:100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="A" label="存货编码"></el-table-column>
          <el-table-column prop="B" label="存货名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="C" label="规格型号"></el-table-column>
          <el-table-column prop="D" label="计量单位"></el-table-column>
          <el-table-column prop="E" label="一级类别" show-overflow-tooltip></el-table-column>
          <el-table-column prop="F" label="类别名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="G" label="库存数量"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer cover">
          <el-button size="small" @click="Determine">确 定</el-button>
          <el-button size="small" @click="StockDialog = false">取 消</el-button>
        </div>
      </el-dialog> -->
  </section>
</template>
<script>
export default {
  name: "BOMPurchaseOrder",
  data() {
    return {
      loading: true, //显示列表loading
      dialogSearchVisible: false, //查询窗口
      OrderStatus:"",
      isShowRadio:false,
      docViewloading: false, //流程图
      formLabelWidth: "70px",
      SaleOrderDialog: false,
      InventoryDialog: false,
      PurOrderDialog: false,
      StockDialog:false,
      isshowList: true, //列表
      isshowBOM: false, //BOM
      isshowIn: false, //入仓单
      isshowInvoice: false, //发票
      isshowPay: false, //付款单
      checked: false,
      multipleSelection: [],
      multipleSelectSale: [],
      currentRow: null,
      stockDialog: false,
      radioExport: 1,
      ExportDialog: false, //询问窗口
      SurRadio: 1,
      swithReturn: false,
      isShow1:false,
      isShow2:false,
      isShow3:false,
      inStatus:false,
      StockList:[
        {
                A:'CH18030010',
                B:1500,
                C:1500,
                D:'SC18030005'
        },
        {
                A:'CH18030011',
                B:5500,
                C:3000,
                D:'SC18030005'
        },
        {
                A:'CH18030012',
                B:4000,
                C:6600,
                D:'SC18030777'
        }
      ],
      stockData: [
        {
          A: "SC18020002",
          B: "CH18020014",
          C: "采购进货",
          D: "",
          E: "",
          F: "",
          G: ""
        },
        {
          A: "SC18020002",
          B: "CH18020014",
          C: "采购进货",
          D: "",
          E: "",
          F: "",
          G: ""
        },
        {
          A: "SC18020002",
          B: "CH18020014",
          C: "采购进货",
          D: "",
          E: "",
          F: "",
          G: ""
        }
      ],
      InventoryData:[
        {
          A:"10001",
          B:"600ML脉动饮料",
          C:"600ML/一瓶",
          D:"瓶",
          E:"1920"
        },
        {
          A:"10002",
          B:"600ML脉动饮料",
          C:"600ML/一瓶",
          D:"瓶",
          E:"0"
        },{
          A:"10003",
          B:"600ML脉动饮料",
          C:"600ML/一瓶",
          D:"瓶",
          E:"190"
        },
        {
          A:"10004",
          B:"600ML脉动饮料",
          C:"600ML/一瓶",
          D:"瓶",
          E:"120"
        }
      ],
      Settlement: [
        {
          value: "1",
          label: "入仓单结算"
        },
        {
          value: "2",
          label: "发票结算"
        }
      ], 
      //结算方式
      OtherType:"",
      settle: "",
      checkflowRowVisible: false,
      dialogPrintVisible: false,
      printLoading:false,
      docRowView: [
        {
          PlanUser: "杨晓莉",
          StepName: "提交",
          OpDate: "2018/1/25 16:25:55",
          OpRemark: ""
        },
        {
          PlanUser: "杨晓莉",
          StepName: "提交",
          OpDate: "2018/1/25 16:25:55",
          OpRemark: ""
        },
        {
          PlanUser: "杨晓莉",
          StepName: "提交",
          OpDate: "2018/1/25 16:25:55",
          OpRemark: ""
        },
        {
          PlanUser: "杨晓莉",
          StepName: "提交",
          OpDate: "2018/1/25 16:25:55",
          OpRemark: ""
        }
      ],
      //核销预付款
      Payment: [
        {
          A: "2018-01-31",
          B: "YF180100010",
          C: "预付款",
          D: 5363,
          E: 0,
          F: 5363,
          G: 5363.0
        }
      ],
      //发票明细
      InvoiceDetail: [
        {
          A: "CH18020014",
          B: "采购进货",
          C: "10018",
          D: "500ML统一阿萨姆奶茶",
          E: 1500,
          F: 1500,
          G: 1500,
          H: 2.97,
          I: 6,
          J: 3.14467,
          K: 4455.0,
          L: 262.0,
          M: 4717.0
        },
        {
          A: "CH18020014",
          B: "采购进货",
          C: "10017",
          D: "500ML统一冰红茶",
          E: 300,
          F: 300,
          G: 1500,
          H: 1.97,
          I: 6,
          J: 2.08333,
          K: 4455.0,
          L: 34.0,
          M: 625.0
        },
        {
          A: "CH18020014",
          B: "采购进货",
          C: "10018",
          D: "500ML统一阿萨姆奶茶",
          E: 1500,
          F: 1500,
          G: 1500,
          H: 2.97,
          I: 6,
          J: 3.14467,
          K: 4455.0,
          L: 262.0,
          M: 4717.0
        }
      ],
      InWarehousingDetail:[{
          A:"YF0015",
          B:"直流电机",
          C:100,
          D:100,
          E:400,
          F:1980,
          G:1920,
      },{
          A:"YF0015",
          B:"直流电机",
          C:100,
          D:100,
          E:400,
          F:1980,
          G:1920,
      },{
          A:"YF0015",
          B:"直流电机",
          C:100,
          D:100,
          E:400,
          F:1980,
          G:1920,
      }
      ],
      PurOrderList:[{
          A: "2018-03-03",
          B: "FG18030019",
          C: "非BOM采购",
          D: ""
        },{
          A: "2018-03-03",
          B: "FG18030019",
          C: "非BOM采购",
          D: ""
        },{
          A: "2018-03-03",
          B: "FG18030019",
          C: "非BOM采购",
          D: ""
        },{
          A: "2018-03-03",
          B: "FG18030019",
          C: "非BOM采购",
          D: ""
      }],
      OrderDetail: [
        {
          A: "YF0015",
          B: "直流电机",
          C: 10,
          D: 100,
          E: "",
          F: 3.55,
          G: "系统反算",
          H: ""
        },
        {
          A: "YF0015",
          B: "直流电机",
          C: 10,
          D: 100,
          E: "",
          F: 3.55,
          G: "系统反算",
          H: ""
        },
        {
          A: "YF0015",
          B: "直流电机",
          C: 10,
          D: 100,
          E: "",
          F: 3.55,
          G: "系统反算",
          H: ""
        },
        {
          A: "YF0015",
          B: "直流电机",
          C: 10,
          D: 100,
          E: "",
          F: 3.55,
          G: "系统反算",
          H: ""
        },
        {
          A: "YF0015",
          B: "直流电机",
          C: 10,
          D: 100,
          E: "",
          F: 3.55,
          G: "系统反算",
          H: ""
        },
        {
          A: "YF0015",
          B: "直流电机",
          C: 10,
          D: 100,
          E: "",
          F: 3.55,
          G: "系统反算",
          H: ""
        }
      ],
      pop1:false,
      pop2:false,
      SaleOrderList: [
        {
          A: "CX180100001",
          B: "材料销售",
          C: "郑州刘军法",
          D: "KABA970240,KABA150160",
          E: ""
        },
        {
          A: "CX180100001",
          B: "材料销售",
          C: "郑州刘军法",
          D: "KABA970240,KABA150160",
          E: ""
        },
        {
          A: "CX180100001",
          B: "材料销售",
          C: "郑州刘军法",
          D: "KABA970240,KABA150160",
          E: ""
        },
        {
          A: "CX180100001",
          B: "材料销售",
          C: "郑州刘军法",
          D: "KABA970240,KABA150160",
          E: ""
        }
      ],
      DocNo: "CKD188097772",
      DocDate: "",
      name1: "",
      input2: "",
      Names: [
        {
          label: "1",
          value: "1"
        },
        {
          label: "1",
          value: "2"
        }
      ],
      PayDetail:[{
        A:"CH18000515 ",
        B:"采购进货单",
        C:"2018-01-10",
        D:500,
        E:'',
        F:500,
        G:'',
      },{
        A:"CH18000515 ",
        B:"采购进货单",
        C:"2018-01-10",
        D:500,
        E:'',
        F:500,
        G:'',
      },{
        A:"CH18000515 ",
        B:"采购进货单",
        C:"2018-01-10",
        D:500,
        E:'',
        F:500,
        G:'',
      }],
      Searchform: {
        StartMoney: "",
        EndMoney: "",
        StartDate: "",
        EndDate: "",
        DocNo: "",
        Title: "",
        DocStatus: ""
      },
      options: [
        {
          value: "1",
          label: "黄金糕"
        },
        {
          value: "2",
          label: "双皮奶"
        }
      ],
      options2: [
        {
          value: "1",
          label: "黄金糕"
        },
        {
          value: "2",
          label: "双皮奶"
        }
      ],
      dataList: [
        {
          A: "2016-05-03",
          B: "BG18010001",
          C: "BOM采购订单",
          D: "50%",
          E: 15000,
          F: 15000,
          G: "入仓单结算",
          H: "广州市品冠电子有限公司",
          I: "待审核"
        },
        {
          A: "2016-05-03",
          B: "BG18010001",
          C: "BOM采购订单",
          D: "50%",
          E: 15000,
          F: 15000,
          G: "入仓单结算",
          H: "广州市品冠电子有限公司",
          I: "待审核"
        },
        {
          A: "2016-05-03",
          B: "BG18010001",
          C: "BOM采购订单",
          D: "50%",
          E: 15000,
          F: 15000,
          G: "入仓单结算",
          H: "广州市品冠电子有限公司",
          I: "待审核"
        },
        {
          A: "2016-05-03",
          B: "BG18010001",
          C: "BOM采购订单",
          D: "50%",
          E: 15000,
          F: 15000,
          G: "入仓单结算",
          H: "广州市品冠电子有限公司",
          I: "待审核"
        },
        {
          A: "2016-05-03",
          B: "BG18010001",
          C: "BOM采购订单",
          D: "50%",
          E: 15000,
          F: 15000,
          G: "入仓单结算",
          H: "广州市品冠电子有限公司",
          I: "待审核"
        },
        {
          A: "2016-05-03",
          B: "BG18010001",
          C: "BOM采购订单",
          D: "50%",
          E: 15000,
          F: 15000,
          G: "入仓单结算",
          H: "广州市品冠电子有限公司",
          I: "待审核"
        }
      ],
      loading: false,
      inputIndex: 0,
      isshowSettle: true,
      tooltipShow:false,
      radioModel: '',
    };
  },

  methods: {
    jump(index) {
      if (this.$refs[index + 1]) {
        this.$refs[index + 1][0].$el.getElementsByTagName('input')[0].focus();
      }
    },
    fpCheck(event) {
      let checkTests = document.getElementsByClassName("testCheckBox");
      console.log(checkTests);
      console.log(event.currentTarget.checked);
      for (let i = 0; i < checkTests.length; i++) {
        console.log(checkTests);
        if (event.currentTarget.checked) {
          checkTests[i].children[0].className += " is-checked";
        } else {
          checkTests[i].children[0].className = checkTests[
            i
          ].children[0].className.split("is-checked")[0];
        }
      }
    },
    inputFocus(e) {
      console.log(e);
      e.target.style = "border: 2px red solid ";
    },
    inputBlur(e) {
      console.log(e);
      e.target.style = "border: 2px transparent solid ";
    },
    tooltipToggleFn(is = true){
      this.tooltipShow = is;
    },
    changeRadio(e){
      if(e==1){
        this.isShow1 = true;
        this.isShow2 = true;
        this.isShow3 = true;
        this.OrderStatus = true;
        console.log('BOM采购')
      }else{
        this.isShow1 = false;
        this.isShow2 = false;
        this.isShow3 = false;
        this.OrderStatus = false;
        console.log('其它采购')
      }
    },
    check(e,val){
      console.log(e);
      this.radioModel = `—${val}`;
      if(e==2){
        this.isShow1 = true;
        this.isShow2 = false;
        this.isShow3 = true;
        this.OtherType = '非BOM采购'
      }else if(e==3){
        this.isShow1 = true;
        this.isShow2 = false;
        this.isShow3 = true;
        this.OtherType = '食品采购'
      }else{
        this.isShow1 = true;
        this.isShow2 = true;
        this.isShow3 = true;
        this.OtherType = '超额采购'
      }
      this.tooltipToggleFn(false);
    },
    //申请入仓
    NewsIn(){
      this.$router.push({
        path:'/PurchaseIn',
        query:{
          InYes:true,
          generate:true
        }
      })
    },
    nextinput(event, index) {
      let i = index.split("-");
      let s ; 
      if (i[1] == "2") {
        s = `input${Number(i[0]) + 1}-1`;
        console.log(s, "s")
      } else {
        s = `input${i[0]}-2`;
      }
      console.log(s , document.getElementsByClassName(s)[0].getElementsByClassName('el-input__inner')[0], "123123"),
      document.getElementsByClassName(s)[0] && document.getElementsByClassName(s)[0].getElementsByClassName('el-input__inner')[0].focus();
    },

    logTimeChange(val) {
    },
    //点击导出时弹出询问框
    handleExport() {
      this.ExportDialog = true;
    },
    SupplierError(){
      console.log(this.$refs['select'],"this.$refs['select']");
      this.$refs['select'].visible = true;
    },
    //新建发票
    NewsInvoice(){
      this.$router.push({
        path:'/PurchaseInvoice',
        query:{
          News:true
        }
      })
      this.isshowInvoice = true;
      this.isshowList = false;
      this.isshowPay = false
    },
    Search() {
      this.dialogSearchVisible = true;
    },
    async Query() {
      this.dialogSearchVisible = false;
    },
    settleChange(e) {
      e == "1" ? (this.isshowSettle = false) : (this.isshowSettle = true);
    },
    //重置
    Reset() {
      this.Searchform = {
        StartMoney: "",
        EndMoney: "",
        StartDate: "",
        EndDate: "",
        DocNo: "",
        Title: "",
        DocStatus: ""
      };
    },
    //多选
    handleSelectionList(val) {
      let arr = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach((item, index) => {
        console.log(item.date, "item");
        arr.push(item.date);
      });
      const arrjoin = arr.join();
      console.log(arrjoin);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.log(this.currentRow, "this.currentRow");
    },

    //销售订单确定按钮
    Determine() {
      let arr = "";
      this.multipleSelectSale.map(item => {
        arr = item.name;
      });
      console.log(arr, "arr");
      this.stockDialog = false;
    },
    //BOM采购页面
    handleBOM(index, row) {
      this.isshowBOM = true;
      this.isshowList = false;
      this.isshowInvoice = false;
      this.isshowPay = false;
      this.isshowIn = false;
      this.radioModel = '';
      this.OrderStatus = '';
      this.tooltipShow = false;
      if(this.isUndefined(row)) {
        console.log('新增')
        this.SurRadio = ''
        this.$router.push({
          path: '/BOMPurchaseOrder',
          query:{
            News:true,
          }
        })
        this.isShowRadio = true;
      } else {
        console.log('修改')
        this.$router.push({
          path: '/BOMPurchaseOrder',
          query:{
            Edit:true,
          }
        })
      }
    },
    //入仓单
    handleIn() {
      this.isshowIn = true;
      this.isshowPay = false;
      this.isshowList = false;
      this.isshowBOM = false;
      this.isshowInvoice = false;
      this.inStatus = true;
      this.$router.push({
      path: 'BOMPurchaseOrder',
        query:{
          InYes:true
        }
      })
    },
    handleStockDialog(){
      //打开进货单列表窗口
      this.StockDialog = true;
    },
    //付款单
    handlePay() {
      this.isshowPay = true;
      this.isshowInvoice = false;
      this.isshowBOM = false;
      this.isshowList = false;
      this.isshowIn = false;
    },
    //发票
    handleInvoice() {
      this.isshowInvoice = true;
      this.isshowPay = false;
      this.isshowBOM = false;
      this.isshowList = false;
      this.isshowIn = false;
    },
    //打开进货窗口
    OpenStock(index) {
      this.stockDialog = true;
    },
    //打开存货窗口
    OpenInventory(index) {
      if(this.OrderStatus == true){ //如果是BOM采购订单 就禁止点击
        return;
      }
      this.InventoryDialog = true;
    },
    //采购订单按钮
    PurOrderQuery(ev) {
      this.PurOrderDialog = true;
      console.log(ev, "ev");
    },
    // 新建返回到列表页面
    ToBack() {
      this.isshowList = true;
      this.isshowBOM = false;
      this.isshowIn = false;
      this.isshowInvoice = false;
      this.isshowPay = false;
      this.$router.push({
        path: '/BOMPurchaseOrder',
      })
      this.InWarehousingDetail = [
        {
          A:"YF0015",
          B:"直流电机",
          C:100,
          D:100,
          E:400,
          F:1980,
          G:1920,
        }
      ];
    },
    handlePrint(){
      this.dialogPrintVisible = true
    },
    //打印
    printPdf(){
      $("#form1").jqprint({
        debug: false,
        importCSS: true,
        printContainer: false,
        operaSupport: false
      });
    },
    // 表格 tr 添加class
    tableRowClassName(row, index) {
      if (!row.checked && this.gray) {
        return 'gray';
      }
    },
    unChecked(row) {
      if (!row.checked && this.gray) {
          return 0;
      } else {
          return 1;
      }
    },
    //销售订单列表
    handleSelectionSale(val){
        // 给个状态
        var flag = false;
        // 遍历
        this.PurOrderList.forEach(tItem => {
          // 只要有一个为 true就改变状态
          if (tItem.checked) {
            flag = true;
            tItem.checked = false;
          }
        });
        // 如果当前表格数据没有一个被选中的情况下那么就选中当前的
        if (!flag) {
          if (val.checked) {
            val.checked = false;
            // 取消选中的时候，还原
            this.gray = false;
          } else {
            val.checked = true;
            // 选中的时候，其他变灰
            this.gray = true;
          }
          this.$nextTick(() => {
            this.tableRowClassName(val, 0)
            this.unChecked(val)
          });
        }
        this.multipleSelectSale = val;
    },
    //帮助=》Pop浮窗切换显示隐藏
    popClick(e){
      if(e===1){
        this.pop1=true
        this.pop2=false
      }else{
        this.pop1=false
        this.pop2=true
      }
    },
    //弹框取消按钮
    Cancel() {
      this.ExportDialog = false;
    },
    Determine() {
      this.ExportDialog = false;
      console.log(this.radioExport, "this.radioExport");
    },
    //销售订单按钮
    SaleOrderQuery(ev) {
      this.SaleOrderDialog = true;
      console.log(ev, "ev");
    },
    handleIconClick() {},
    //申请预付
    NewsAdvance(){
      this.$router.push({
        path:'/PurchasePayment',
        query:{
          isAdPay:true
        }
      })
    },
    //保存
    Save() {},
    //提交
    Submit() {},
    //合并订单
    handleMerge(index, row) {
      this.$confirm("确定要合并所选订单吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.$message({
          type: "success",
          message: "合并成功"
        });
      });
    },
    handleDel(index, row) {
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.$message({
          type: "success",
          message: "删除成功"
        });
      });
    },
    //流程图
    checkflowRow() {
      this.checkflowRowVisible = true;
    },
    Stock(index,inStatus){
      if(inStatus==true){
        return;
      }
      this.StockDialog = true;
    },
    addInRow(index) {
      const item = {
        A:"YF0015",
        B:"直流电机",
        C:100,
        D:100,
        E:400,
        F:1980,
        G:1920,
      };
      this.InWarehousingDetail.splice(index + 1, 0, item);
    },
    addOrderRow(index) {
      const item = {
        A: "YF0015",
        B: "直流电机",
        C: 10,
        D: 100,
        E: "",
        F: 3.566,
        G: "系统反算",
        H: ""
      };
      this.OrderDetail.splice(index + 1, 0, item);
    },
    deleOrderRow(index) {
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.OrderDetail.splice(index, 1);
        this.$message({
          message: "已删除",
          type: "success"
        });
      });
    },
    confirm(){
      this.StockDialog = false;
    },
    stockSearch(){

    },
    //入仓明细删除事件
    deleInRow(index) {
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.InWarehousingDetail.splice(index, 1);
        this.$message({
          message: "已删除",
          type: "success"
        });
      });
    },
    // 撤销
    repeal(index, row) {
      this.$confirm("确认撤销吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.$message({
          type: "success",
          message: "撤销成功"
        });
      });
    },
  },
  created(){
    /* this.hi(1,2); */
    const query = this.$route.query;
    this.isshowBOM = true;
    this.isshowList = false;
    this.isshowIn = false;
    this.isshowInvoice = false;
    this.isshowPay = false;
    if(query.BOM && query.BOM==true){
      console.log('BOM采购');
      console.log(query,'query');
      this.OrderStatus = true;
      this.isShowRadio = true;
      this.radioModel = '—BOM采购'
    }else if(query.Other==true){
      console.log('其他采购');
      this.OrderStatus = false;
      if(query.OtherType==1){
        this.radioModel = '—超额采购'
        this.OtherType = '超额采购'
      }else if(query.OtherType==2){
        this.radioModel = '—非BOM采购'
        this.OtherType = '非BOM采购'
      }else if(query.OtherType==3){
        this.radioModel = '—食品采购'
        this.OtherType = '食品采购'
      }
    }else{
      this.isshowList = true;
      this.isshowBOM = false;
      this.isshowIn = false;
      this.isshowInvoice = false;
      this.isshowPay = false;
    }
 
  },
  mounted() {},
  computed: {
    //本次核销
    verification(){
      let sum = 0;
      this.Payment.forEach(item=>{
        sum+=Number(item.G);
      })
      return sum;
    },
    OrderStatusComputed(){
      if(this.OrderStatus){
        return 8;
      }else{
        return 7;
      }
    },
    //发票 税金=》合计
    TaxCount(){
      let sum = 0;
      this.InvoiceDetail.forEach(item=>{
            sum+=Number(item.K);
      })
      return sum;
    },
    //发票 税率=》合计
    TaxRateCount(){
      let sum = 0;
      this.InvoiceDetail.forEach(item=>{
        sum+=Number(item.J);
      })
      return sum;
    },
    //发票 金额=》合计
    PrintCount(){
      let sum = 0;
      this.InvoiceDetail.forEach(item=>{
        sum+=Number(item.I);
      })
      return sum;
    },
    //发票 价税总额=》合计
    TaxAmountCount(){
      let sum = 0;
      this.InvoiceDetail.forEach(item=>{
        sum+=Number(item.L);
      })
      return sum;
    },
    //采购付款单 应付总额
    copeWithCount(){
      let sum = 0;
      this.PayDetail.forEach(item=>{
        sum+=Number(item.D);
      })
      return sum;
    },
    //采购付款单 已付总额
    paidCount(){
      let sum = 0;
      this.PayDetail.forEach(item=>{
        sum+=Number(item.E);
      })
      return sum;
    },
    //采购付款单 剩余未付
    surplusCount(){
      let sum = 0;
      this.PayDetail.forEach(item=>{
        sum+=Number(item.F);
      })
      return sum;
    },
    //采购付款单 本次付款
    thisCount(){
      let sum = 0;
      this.PayDetail.forEach(item=>{
        sum+=Number(item.G);
      })
      return sum;
    },
    //订单明细 不含税金额
    OrderNotaxAmount() {
      let sum = 0;
      this.OrderDetail.forEach(item => {
        sum += Number(item.I);
      });
      return sum;
    },
    RadioComputed(){
      if(this.radioModel === 1){
        return '—BOM采购'
      }else if(this.radioModel === 2){
        return ''
      }else if(this.radioModel === '') {
        return  ''
      }else{
        return this.radioModel;
      }
    },
    InRadioComputed(){
      if(this.inStatus === true){
        return '—订单入仓'
      }else if(this.inStatus === false){
        return ''
      } else {
        return ''
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import "~scss_vars";
@import "../../../common/css/index.css";
.main-left {
  padding: 1vw 1vw;
}
.main-left h3 {
  height: 20px;
  line-height: 20px;
  margin-bottom: 10px;
}
.left-form,
.right-form {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-table .cell {
  padding: 0 0;
}
</style>

